<html>
<head>

<title> A Basic GeoExt Page </title>
<script src="ext-3.4.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.4.0/ext-all.js"  type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css"></link>
<script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link>

<script type="text/javascript">
    Ext.onReady(function() {
			var bounds = new OpenLayers.Bounds(
                    105.227535, 9.920258,
                    105.845518, 10.327515
                );
                var options = {
                    controls: [],
                    maxExtent: bounds,
                    maxResolution: 0.00241399609375,
                    projection: "EPSG:4326",
                    units: 'degrees'
                };
        var map = new OpenLayers.Map('map',options);
		map.addControl(new OpenLayers.Control.Navigation());
		
        var layer = new OpenLayers.Layer.WMS(
            "Xa phuong layer",
            "http://localhost:8080/geoserver/wms",
            {layers: "GT:xaphuong_region"}
        );
        map.addLayer(layer);
		

        new GeoExt.MapPanel({
            renderTo: 'gxmap',
            height: 500,
            width: 800,
            map: map,
            title: 'Ban do thanh pho Can Tho',
			items: [{
				xtype: "gx_zoomslider",
				vertical: true,
				height: 100,
				x: 10,
				y: 20,
				plugins: new GeoExt.ZoomSliderTip()
			}]
        });
    });
</script>
</head>
<body>
<div id="gxmap" ></div>
</body>
</html>